<template>
	<view class="my-attendance-box" v-if="nowDate">
		<view class="data-box">
			<view class="data-item" @click="showYearMonth = true">
				<view class="data-label">{{year||"选择年份"}}</view>
				<image src="@/static/index/arrow-down.png" class="down-icon"></image>
			</view>
			<view class="data-item" @click="showYearMonth = true">
				<view class="data-label">{{month||"选择月份"}}</view>
				<image src="@/static/index/arrow-down.png" class="down-icon"></image>
			</view>
		</view>
		<view class="calendar-box">
			<bruce-calendar :lunar="true" :date="nowDate" @monthSwitch="monthChange" @change="selectDate"
				:selected="attendanceData" />
		</view>
		<u-popup :show="showSignUp" mode="center" round="24rpx">
			<view class="attendance-info">
				<view class="attendance-header">
					<view class="attendance-title">考勤记录</view>
					<view class="attendance-close">
						<image src="@/static/index/close.png" mode="aspectFill" @click="showSignUp = false"></image>
					</view>
				</view>
				<view class="attendance-list">
					<view class="attendance-item" v-for="(item, index) in signUpRecord" :key="index">
						<view class="item-top">
							<view class="item-info">
								<text class="label">学校：</text>
								<text class="value">{{item.school.title}}</text>
							</view>
							<view class="item-info">
								<text class="label">课程：</text>
								<text class="value">{{item.course.title}}</text>
							</view>
							<view class="item-info">
								<text class="label">班级：</text>
								<text class="value">{{item.banji.title}}</text>
							</view>
						</view>
						<view class="item-bottom">
							<view class="attendance-teacher">{{item.teacher.name}}</view>
							<view class="attendance-status" :style="{ color: formatSingInfo(item).color }">
								{{ formatSingInfo(item).text }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker :show="showYearMonth" v-model="pickerDate" mode="year-month" closeOnClickOverlay
			@confirm="confirmPickerDate" @change="changePickerDate" @cancel="showYearMonth=false"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				year: '', // 当前年份
				month: '', // 当前月份
				day: '', // 当前日期
				nowDate: '', // 当前年月
				pickerDate: new Date(),
				showYearMonth: false, // 是否显示年月选择器
				showSignUp: false, // 是否显示签到信息
				attendanceData: [], // 本月签到数据
				signUpRecord: [], // 签到记录
			}
		},
		onLoad() {
			// 获取当前日期
			const date = new Date();
			this.year = date.getFullYear();
			this.month = (date.getMonth() + 1).toString().padStart(2, '0');
			this.day = date.getDate().toString().padStart(2, '0'); // 确保日期是两位数
			this.nowDate = `${this.year}-${this.month}-${this.day}`; // 格式化日期为 YYYY-MM
			this.getTeacherAttendance();
		},
		methods: {
			changePickerDate(e) {
				this.pickerDate = e.value; // 更新选择的日期
			},
			confirmPickerDate(e) {
				this.showYearMonth = false; // 关闭选择器
				this.year = new Date(e.value).getFullYear()
				this.month = (new Date(e.value).getMonth() + 1).toString().padStart(2, '0'); // 确保月份是两位数
				this.nowDate = `${this.year}-${	this.month}-01`; // 更新日期格式
				this.getTeacherAttendance(); // 获取新的月份签到数据
			},
			getTeacherAttendance() {
				this.$Api.user.getTeacherAttendance({
					date: `${this.year}-${	this.month}`
				}).then(res => {
					this.attendanceData = res.data.map(item => {
						return this.mapAttendanceStatus(item.is_sign_up, item.date) // 映射状态信息
					})
				})
			},
			// 1=无排课，2=正常，3=异常
			mapAttendanceStatus(status, date) {
				switch (status) {
					case 1:
						return {
							date: date, info: '无课', color: '#9E9E9E', isSignUp: false,
						};
					case 2:
						return {
							date: date, info: '正常', color: '#23C616', isSignUp: true
						};
					case 3:
						return {
							date: date, info: '异常', color: '#FE4F04', isSignUp: true
						};
					case 4:
						return {
							date: date, info: '未开始', color: '#9E9E9E', isSignUp: true
						};
					default:
						return {
							date: date, info: '未知', color: '#9E9E9E', isSignUp: false
						};
				}
			},
			monthChange(e) {
				console.log(e)
				// 月份切换事件
				this.year = e.year;
				this.month = (e.month < 10 ? '0' + e.month : e.month); // 确保月份是两位数
				this.nowDate = this.year + '-' + this.month + '-01'; // 更新日期格式
				this.getTeacherAttendance(); // 获取新的月份签到数据
			},
			selectDate(e) {
				if (!e.extraInfo.isSignUp) {
					return this.$Toast('今日没有您的排课信息')
				}
				this.getTeacherAttendanceDetail(e.fulldate)
			},
			getTeacherAttendanceDetail(date) {
				// 获取指定日期的签到详情
				this.$Api.user.getTeacherAttendanceDetail({
					date: date
				}).then(res => {
					this.showSignUp = true; // 显示签到信息
					this.signUpRecord = res.data
				})
			},
			// 格式化签到信息
			formatSingInfo(item) {
				// 1=未打卡 ，2=正常打卡，3=迟到 4=未开始
				switch (item.is_sign) {
					case "1":
						return {
							text: '缺勤', color: '#F8A500'
						};
					case "2":
						return {
							text: '正常', color: '#23C616'
						};
					case "3":
						return {
							text: '迟到', color: '#FE4F04'
						};
					case "4":
						return {
							text: '未开始', color: '#9E9E9E'
						};
					default:
						return {
							text: '未知', color: '#9E9E9E'
						};
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-attendance-box {
		height: 100vh;
		background-color: #f5f6fa;
		padding: 20rpx;
		box-sizing: border-box;

		.data-box {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.data-item {
				width: 332rpx;
				height: 76rpx;
				background-color: #fff;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24rpx;
				box-sizing: border-box;

				.data-label {
					font-size: 26rpx;
					color: #606060;
				}

				.down-icon {
					width: 16rpx;
					height: 12rpx;
				}
			}
		}

		.calendar-box {
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
			padding: 20rpx;
		}

		.attendance-info {
			width: 580rpx;
			height: 100%;
			background-color: #fff;
			border-radius: 24rpx;

			.attendance-header {
				height: 114rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 26rpx;
				padding: 0 42rpx;
				box-sizing: border-box;
				background: #0095F8;
				border-radius: 20rpx 20rpx 0rpx 0rpx;

				.attendance-title {
					font-weight: 500;
					font-size: 40rpx;
					color: #FFFFFF;
				}

				.attendance-close {
					width: 42rpx;
					height: 42rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.attendance-list {
				max-height: 600rpx;
				overflow-y: auto;

				.attendance-item {
					padding: 0 44rpx;
					margin-bottom: 60rpx;

					.item-top {
						.item-info {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							margin-bottom: 24rpx;

							.label {
								color: #999999;
							}

							.value {
								margin-left: 10rpx;
								color: #333333;
							}
						}
					}

					.item-bottom {
						display: flex;
						justify-content: space-between;
						font-size: 30rpx;

						.attendance-teacher {
							font-weight: 500;
							color: #333333;
						}
					}
				}
			}
		}
	}
</style>